<template>
  <div class="container">
    <nav-bar title="找回密码" :cartShow="false" />
    <div class="form">
      <div class="title">找回密码</div>
      <!-- 手机号码注册 -->
      <div class="ipt ipt-phone">
        <div class="country-num">+86</div>
        <input type="number" v-model="phone" placeholder="请输入手机号码" />
      </div>
      <div class="ipt ipt-validate">
        <input type="text" v-model="validate" placeholder="请输入验证码" />
        <a @click="getCode">获取验证码</a>
      </div>
      <div class="ipt ipt-password">
        <input type="password" v-model="password" placeholder="请输入新密码" />
        <div class="rule-tips">密码必须是字母+数字组合，且不少于8位</div>
      </div>
      <div class="form-btns">
        <div class="form-btn" :class="{'btn-bg': passReg}" @click="getPassword">确定</div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from 'components/common/NavBar'
import { Toast, Dialog } from 'vant'
import { request, phoneReg, passwordReg } from '../../utils'
import { getPhoneCode } from '../../network/user'

export default {
  components: {
    NavBar
  },
  data() {
    return {
      userKey: localStorage.getItem('userKey'),
      phone: '',
      password: '',
      validate: '',
    }
  },
  computed: {
    passReg(){
      return phoneReg(this.phone) && passwordReg(this.password)
    }
  },
  methods: {
    getPassword(){
      // 校验手机号
      if(this.phone === ''){
        Toast('请输入手机号')
        return false
      }
      if(!phoneReg(this.phone)){
        Toast('手机号输入错误')
        return false
      }
      // 校验密码
      if(this.password === ''){
        Toast('请输入新密码')
        return false
      }
      if(!passwordReg(this.password)){
        Toast('新密码输入错误')
        return false
      }
      // 校验验证码
      if(this.validate === ''){
        Toast('请输入验证码')
        return false
      }
      // 提交表单
      if(this.passReg && this.validate !== '')
      {

        this.getPasswordByPhone(() => {
          Toast('找回密码成功')
          setTimeout(() => {
            this.$router.push('/login')
          }, 1000)
        })
      }
    },
    getCode(){
      // 校验手机号
      if(this.phone === ''){
        Toast('请输入手机号')
        return false
      }
      if(!phoneReg(this.phone)){
        Toast('手机号输入错误')
        return false
      }

      let requestData = {
        mobile: this.phone,
        isChangePwd: true,
      }
      getPhoneCode(requestData, flag => {
        if(flag){
          Toast('短信验证码已发送')
        }
      })
    },
    goToRegisterEmail(){
      this.$router.push({
        path: '/regnewEmail',
      })
    },
    getPasswordByPhone(cb){
      let phone = this.phone
      let password = this.password
      let code = this.validate
      
      if(phone){
        let requestData = {
          Mobile: phone,
          NewPwd: password,
          Code: code,
        }
        this.requestGetpassword(requestData, cb)
      }
    },
    requestGetpassword(requestData, cb){
      console.log('post before request: phone ', requestData)
      request({
        method: 'POST',
        url: 'api/FindPwd/PostChangeMyPwdByMobile',
        data: requestData
      }).then(res => {
        if(res.data.Success){
          cb && cb()
        } else {
          // 用户已注册
          if(res.data.code === 104){
            Dialog.confirm({
              message: '该账号已注册，是否直接登录?'
            }).then(() => {
              this.$router.push('login')
            }).catch(() => {
              // on cancel
            })
          } else {
            Toast(res.data.Msg || res.data.msg)
          }
        }
      })
    },
  },
}
</script>

<style scoped>
.container{
  background: #ffffff;
}
.form{
  padding: 80px 30px 40px 30px;
}
.form .title{
  font-size: 20px;
  line-height: 1.6;
  padding-bottom: 30px;
}
.form .ipt{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
}
.form .ipt input{
  flex-grow: 1;
  height: 50px;
  line-height: 20px;
  font-size: 16px;
  border-bottom: 1px solid #e0e0e0;
}
.form .ipt .country-num{
  color: #ccc;
  height: 50px;
  line-height: 50px;
  padding-right: 10px;
  border-bottom: 1px solid #e0e0e0;
}
.form .ipt-validate{
  position: relative;
}
.form .ipt-validate a{
  position: absolute;
  right: 0;
  top: 5px;
  display: inline-block;
  width: 98px;
  line-height: 40px;
  border-radius: 40px;
  color: #fff;
  text-align: center;
  font-size: 14px;
  background-color: #222;
}
.form-btn{
  margin-top: 50px;
  font-size: 18px;
  text-align: center;
  line-height: 45px;
  color: #ffffff;
  border-radius: 45px;
  opacity: .2;
  background-color: #d50721;
}
.form-btn.btn-bg{
  opacity: 1;
}
.rule-tips{
  font-size: 14px;
  line-height: 40px;
  color: #999;
}
.tips{
  display: block;
  font-size: 16px;
  padding-top: 5px;
  line-height: 3.5;
  color: #0598dd;
  text-align: center;
}
</style>